<template>
  <div class="info-index" v-loading.body="loading">
    <div class="top">
      <div class="top-img"><img :src="info.avatar"/></div>
    </div>
    <div class="bottom clearfix">
      <div class="left">
        <div>用户昵称：{{info.username}}</div>
        <div>注册手机：{{prePhone(info.phone_no)}}</div>
        <div>注册身份：{{info.user_type === 0 ? '教师' : info.user_type === 1 ? '学生' : info.user_type === 2 ? '家长' : '未知'}}</div>
        <div>所属地区：{{info.district && info.district.map((adr, i)=>{ return adr.name}).join('')}}</div>
      </div>
      <div class="right">
        <div>真实姓名：{{info.real_name}}</div>
        <div>常用邮箱：{{info.email}}</div>
        <div>联系QQ：{{info.qq_no}}</div>
        <div>个人简介：{{info.signature}}</div>
      </div>
    </div>
    <div class="btn-group">
      <button class="common-btn" @click="goEdit">编辑</button>
    </div>
  </div>
</template>

<script>
import { NavBar } from 'views/layout'
import user from '@/assets/mock_images/user.jpg'

export default {
  name: 'InfoIndex',
  components: {
    NavBar
  },
  data() {
    return {
      user,
      info: {},
      name: this.$route.name,
      loading: false
    }
  },
  created() {
    this.loading = true
    this.$store.dispatch('GetInfo')
    .then(res => {
      console.log(res)
      this.loading = false
      this.info = res.info
    })
    .catch(err => {
      console.log(err)
      this.loading = false
    })
  },
  methods: {
    goEdit() {
      this.$router.push('/personal/info/edit');
    },
    prePhone(phone) {
      if (phone) {
        return phone.replace(phone.slice(3, 7), '****')
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.info-index{
  padding: 30px 120px;
  .top{
    text-align: center;
    .top-img{
      display: inline-block;
      margin-bottom: 20px;
      width: 80px;
      height: 80px;
      overflow: hidden;
      border-radius: 40px;
      >img{
        width: 80px;
        height: 80px;
      }
    }
  }
  .bottom{
    width: 100%;
    >div>div{
      line-height: 40px;
    }
    .left{
      width: 50%;
      float: left;
      border-right: 1px solid #e5e6e7;
    }
    .right{
      width: 50%;
      float: left;
      padding-left: 100px;
      >div{

      }
    }
  }
  .btn-group{
    margin: 80px auto;
    text-align: center;
    >button{
      width: 160px;
      height: 40px;
    }
  }
}
</style>